<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<link href="${pageContext.request.contextPath}/css/chooseDetail.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/dist/jquery/jquery-3.4.1.min.js"></script>

<body>
<jsp:include page="../public/header.jsp"/>
    <div class="choice-question">
        <div class="first-line">
            <!--第一行左边的-->
            <div class="first-line-left">
                <span class="title">hello-world</span>
                <span class="title">-</span>
                <span class="title">专项练习</span>

                <!--第一行右边的计时器-->
                <div class="time">
                    <input type="text" id="timetext" value="0时0分0秒"  class="time-long" readonly><br>
                    <!--<input type="text" value="00:00:00" class="time-long">-->
                    <!-- <input type="button" value="开始" >
                     <input type="button" value="结束">
                     <input type="button" value="重置">-->
                </div>
            </div>
            <!--第一行右边的计时器-->
        </div>

        <div class="second-line">
            <div class="inner">
                <div class="question-count">

                    <c:forEach var="questionDetail" items="${requestScope.serverResponse.data}" varStatus="st">
                        <c:if test="${questionDetail.choiceId==choice.choiceId}">
                            <span class="pre">${st.count}</span>
                            <span class="middle">/</span>
                            <span class="next">10</span>
                        </c:if>
                    </c:forEach>


                </div>
                <div class="photo"><img src="${pageContext.request.contextPath}/images/zw/question.svg"></div>
                <div class="single-choice">[单选题]</div>
            </div>
        </div>

        <div class="third-line">
            <div class="third-inner">
                <div class="subject-content">
                    <span>${requestScope.choice.choiceName}</span>
                </div>
                <div class="subject-options">
                    <div class="boxs">
                        <input type="radio" class="icons" name="items" value="a">
                        <span>${requestScope.choice.choiceAnsA}</span>
                    </div>

                </div>
                <div class="subject-options">
                    <div class="boxs">
                        <input type="radio" class="icons" name="items" value="b">
                        <span>${requestScope.choice.choiceAnsB}</span>
                    </div>

                </div>
                <div class="subject-options">
                    <div class="boxs">
                        <input type="radio" class="icons" name="items" value="c">
                        <span>${requestScope.choice.choiceAnsC}</span>
                    </div>

                </div>
                <div class="subject-options">
                    <div class="boxs">
                        <input type="radio" class="icons" name="items" value="d">
                        <span>${requestScope.choice.choiceAnsD}</span>
                    </div>

                </div>
            </div>

        </div>

        <div class="fourth-line">
            <div class="fourth-line-left">
                <span class="subject-opr-item">
                    <img src="${pageContext.request.contextPath}/images/zw/collect.svg" class="image">
                    <a href="javascript:void(0)" class="collect-topic topic1" onclick="choiceCollect(${choice.choiceId})">收藏本题</a>
                </span>
                <%--<span class="subject-opr-item">
                    <img src="${pageContext.request.contextPath}/images/zw/mark.svg" class="image">
                    <a href="javascript:void(0)" class="collect-topic topic2">标记一下</a>
                </span>--%>
                <%--<span class="subject-opr-item">
                    <img src="${pageContext.request.contextPath}/images/zw/shield.svg" class="image">
                    <a href="" class="collect-topic">屏蔽本题</a>
                </span>--%>
                <%--<span class="subject-opr-item">
                    <img src="${pageContext.request.contextPath}/images/zw/share.svg" class="image">
                    <a href="" class="collect-topic">场外求助</a>
                </span>--%>
            </div>
            <div class="fourth-line-right">
                <input type="button" name="button" value="提前交卷" class="submit-btn" onclick="submit(${questionSetId})">
                <c:forEach var="questionDetail" items="${requestScope.serverResponse.data}" varStatus="st">
                    <c:if test="${questionDetail.choiceId==choice.choiceId}">
                        <c:set var="count" value="${st.count}" />
                    </c:if>
                    <c:if test="${count!=null && (count+1)==st.count}">
                        <input type="button" name="button" value="下一题" class="next-btn" onclick="next(${questionSetId},${questionDetail.choiceId})">
                    </c:if>
                </c:forEach>

                <input type="button" name="button" value="交卷" class="finish-btn" onclick="submit(${questionSetId})">
            </div>
        </div>

       <%-- <div class="fifth-line">
            * 交卷即可查看全部答案和解析，完成所有题目有机会获得企业内推
        </div>--%>

        <div class="sixth-line">

            <div class="last">
                <div class="sixth-left">
                    <a href="javascript:void(0)"><span class="open-card">展开答题卡</span></a>
                    <a href="javascript:void(0)"><span class="close-card">收起答题卡</span></a>
                </div>

                <div class="sixth-right">
                    <img src="${pageContext.request.contextPath}/images/zw/table.svg" class="table-icon">
                    <div class="right-title">
                        <span class="right-script">单选题</span>
                        <span class="right-script">10</span>
                        <span class="right-script">道</span>
                    </div>
                </div>

            </div>


            <ul class="box-open">
                <c:forEach var="questionDetail" items="${requestScope.serverResponse.data}" varStatus="st">
                    <li class="box-number">
                        <c:choose>
                            <c:when test="${questionDetail.choiceId==choice.choiceId}">
                                <a href="javascript:void(0)" class="number-one">${st.count}</a>
                            </c:when>
                            <c:otherwise>
                                <a href="${pageContext.request.contextPath}/choose/chooseDetail/${questionSetId}/${questionDetail.choiceId}" class="number">${st.count}</a>
                            </c:otherwise>
                        </c:choose>
                    </li>

                </c:forEach>
            </ul>

        </div>
    </div>

<script>
    var choiceId=${choice.choiceId};
</script>
<script src="${pageContext.request.contextPath}/js/chooseDetail.js"></script>
<jsp:include page="../public/footer.jsp"/>
</body>
</html>